<style lang="less" scoped>
  .page__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .chart-title {
      padding-left: 20px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      border-bottom: 1px solid #ffffff;
    }
    .chart-subtitle {
      font-size: 13px;
      color: #797979;
      padding-left: 20px;
      padding-bottom: 2px;
    }
    .charts-panel {
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: row;
      .content {
        width: 60%;
        height: 100%;
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
<template>
  <div class="page__wrapper">

    <simple-form v-model="searchModel" :form-field="searchFormField">
      <template slot="tableOperation">
        <el-button>{{$t('operation.search')}}</el-button>
      </template>
    </simple-form>

    <div class="chart-title">地区公司数据提交情况</div>

    <div class="charts-panel">
      <div class="content" v-for="(title, index) in chartGroups" v-bind:key="index">
        <div class="chart-subtitle">{{title}}</div>
        <div :id="`T${index+1}`" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { addResizeListener } from '../../components/util/resize-event'

export default {
  data () {
    return {
      chartGroups: ['未上市托管入系统报表', '多种经营企业入系统报表', '厂办大集体入系统报表'],
      searchModel: { accountPeriod: '2019', quarter: '1' },
      quarters: [{
        value: '1',
        label: '第一季度'
      }, {
        value: '2',
        label: '第二季度'
      }, {
        value: '3',
        label: '第三季度'
      }, {
        value: '4',
        label: '第四季度'
      }],
      chartConfig: {
        T1: {
          option: {
            color: ['#388E8E', '#EEE685'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              textStyle: {
                color: '#a0a0a0'
              }
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            textStyle: {
              color: '#a0a0a0'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisLabel: {
                  interval: 0,
                  rotate: 40
                },
                data: ['改革推进情况表', '资产负债情况表', '主要经营情况表', '矿区主要经营情况表', '分业务分单位利润情况表', '在职人员增减变化情况表', '分业务分单位人员情况表']
              }
            ],
            yAxis: [
              {
                type: 'value',
                max: 120
              }
            ],
            series: [
              {
                name: '已提交',
                type: 'bar',
                stack: '总量',
                barMaxWidth: 20,
                data: [52, 58, 59, 66, 76, 88, 92]
              },
              {
                name: '未提交',
                type: 'bar',
                barMaxWidth: 30,
                stack: '总量',
                data: [48, 42, 41, 34, 24, 12, 8]
              }
            ]
          },
          obj: null
        },
        T2: {
          option: {
            color: ['#388E8E', '#EEE685'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              textStyle: {
                color: '#a0a0a0'
              }
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            textStyle: {
              color: '#a0a0a0'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisLabel: {
                  interval: 0,
                  rotate: 40
                },
                data: ['基本情况表', '改革推进情况表', '资产负债情况表', '主要经营情况表', '在职人员增减变化情况表']
              }
            ],
            yAxis: [
              {
                type: 'value',
                max: 120
              }
            ],
            series: [
              {
                name: '已提交',
                type: 'bar',
                stack: '总量',
                barMaxWidth: 20,
                data: [51, 60, 65, 88, 92]
              },
              {
                name: '未提交',
                type: 'bar',
                barMaxWidth: 30,
                stack: '总量',
                data: [49, 40, 35, 12, 8]
              }
            ]
          },
          obj: null
        },
        T3: {
          option: {
            color: ['#388E8E', '#EEE685'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              textStyle: {
                color: '#a0a0a0'
              }
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            textStyle: {
              color: '#a0a0a0'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisLabel: {
                  interval: 0,
                  rotate: 40
                },
                data: ['基本情况表', '改革推进情况表', '资产负债情况表', '主要经营情况表', '在职人员增减变化情况表', '人员分流安置情况表']
              }
            ],
            yAxis: [
              {
                type: 'value',
                max: 120
              }
            ],
            series: [
              {
                name: '已提交',
                type: 'bar',
                stack: '总量',
                barMaxWidth: 20,
                data: [50, 56, 63, 74, 75, 88]
              },
              {
                name: '未提交',
                type: 'bar',
                barMaxWidth: 30,
                stack: '总量',
                data: [50, 44, 37, 26, 25, 12]
              }
            ]
          },
          obj: null
        }
      }
    }
  },
  computed: {
    searchFormField () {
      return [
        { prop: 'accountPeriod', label: this.$t('debt_balance.accountPeriod'), type: 'Datepicker', component: { clearable: false, type: 'year', 'value-format': 'yyyy' } },
        { prop: 'quarter', label: this.$t('debt_balance.quarter'), type: 'Select', component: { optionList: this.quarters, filterable: true } },
        { slotName: 'tableOperation', col: { xs: 12, sm: 16, md: 12, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    }
  },
  methods: {},
  mounted () {
    for (let key in this.chartConfig) {
      this.chartConfig[key].obj = echarts.init(document.getElementById(key))
      this.chartConfig[key].obj.setOption(this.chartConfig[key].option)
    }
    // addResizeListener(this.$el.parentElement, () => {
    //   for (let key in this.chartConfig) {
    //     this.chartConfig[key].obj.resize()
    //   }
    // })
  }
}
</script>
